<template>
  <div class="personal-info">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      个人信息
    </mu-appbar>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="profile">
          <mu-list-item-title>个人资料</mu-list-item-title>
          <mu-list-item-title class="right-title">{{info.phone}}</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple>
          <mu-list-item-title>身份认证</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
        <mu-divider class="divider"></mu-divider>
        <mu-list-item button ripple to="referral">
          <mu-list-item-title>二维码</mu-list-item-title>
          <mu-list-item-title class="right-title">
            <mu-icon value="blur_on"></mu-icon>
          </mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="address">
          <mu-list-item-title>送达地址</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
    <mu-paper class="paper">
      <mu-list>
        <mu-list-item button ripple to="myReferral">
          <mu-list-item-title>邀请有礼</mu-list-item-title>
          <mu-list-item-action>
            <mu-button icon>
              <mu-icon color="primary" value="chevron_right"></mu-icon>
            </mu-button>
          </mu-list-item-action>
        </mu-list-item>
      </mu-list>
    </mu-paper>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'collections',
    data() {
      return {
        title: '',
        declareList: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        info: {
          userName: '',
          phone: '',
          email: ''
        }
      }
    },
    components: {
      headerBack
    },
    methods: {
      getData() {
        let _self = this;
        this.postRequest("/user/info").then(res => {
          if (res.code === 200) {
            _self.info = res.data;
          }
        });
      }
    },
    mounted: function () {
      this.getData();
    }
  }
</script>

<style scoped lang="less">

  .personal-info {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 999;
    background-color: #f9f9f9;
  }

  .load-more-wrap {
    width: 100%;
    /*height: 100%;*/
    display: flex;
    flex-direction: column;
    .mu-app-bar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    padding: 10px 0 10px 0;
    -webkit-overflow-scrolling: touch;
    background-color: #3f51b5;
    color: #ffffff;
  }

  .paper {
    margin-bottom: 10px;
    padding: 5px;
  }

  .divider {
    background-color: #f5f5f5;
  }

  .right-title {
    text-align: right;
    margin-right: -2.5rem;
    color: #929292
  }
</style>
